<!DOCTYPE html>
<head>
    <title>商品详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" /><!-- bootstrap -->
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script> <!-- jquery-validator -->
    <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script><!-- layer -->
    <script type="text/javascript" src="/js/md5.min.js"></script><!-- md5.js -->
    <script type="text/javascript" src="/js/common.js"></script><!-- common.js -->
    <script type="text/javascript" src="/js/socket.js"></script><!-- common.js -->
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>
    <div class="panel-body">
    <div id="userTip" style="display: none">
        <span> 您还没有登录，请<a href="/login.html">登陆</a>后再操作<br/></span>
    </div>
    <span>没有收货地址的提示。。。</span>
</div>
<table class="table">
    <tr>
        <td>商品名称</td>
        <td colspan="3" id="goodName"></td>
    </tr>
    <tr>
        <td>商品图片</td>
        <td colspan="3"><img id="goodImg"  width="200" height="200" /></td>
    </tr>
    <tr>
        <td>秒杀开始时间</td>
        <td id="startDate"></td>
        <td id="seckillTip">
        </td>
        <td>
            <img id="verifyCodeImg" width="80" height="32"  onclick="initVerifyCodeImg()">
            <input id="verifyCode">
            <button class="btn btn-primary btn-block" type="button" id="buyButton" onclick="getRandom()">立即秒杀</button>
        </td>
    </tr>
    <tr>
        <td>商品原价</td>
        <td colspan="3" id="goodPrice"></td>
    </tr>
    <tr>
        <td>秒杀价</td>
        <td colspan="3" id="seckillPrice"></td>
    </tr>
    <tr>
        <td>库存数量</td>
        <td colspan="3" id="stockCount"></td>
    </tr>
</table>
</div>
<script>
    var seckillId = getQueryString("seckillId"),
        user;

    // 加载商品详情页数据
    $.ajax({
        url: 'http://localhost:9000/seckill/api/seckill/goods/'+seckillId,
        type: "GET",
        xhrFields: {withCredentials: true},
        success: function (res) { // 只有http请求的status=200
            if (res.code === 200) {
                renderDetail(res.data);
            } else {
                layer.msg(res.msg);
            }
        },
        error: function (res) {
            if (res.responseJSON) {
                layer.msg(res.responseJSON.msg);
            }
        }
    });

    // 初始化验证码图片
    initVerifyCodeImg();

    function initVerifyCodeImg() {
        // 1. 找到存放验证码的图片dom元素
        // 2. 修改 img 标签的 src 属性, 修改为获取验证码图片的路径
        $("#verifyCodeImg").prop("src", "http://localhost:9000/seckill/api/verify/code?t=" + new Date().getTime() + "&seckillId=" + seckillId);
    }

    function getRandom() {
        if (!seckillId) {
            layer.msg("秒杀参数有误!");
            return;
        }
        // 1. 检查用户是否登录
        if (!user) {
            layer.msg("请登录后再进行秒杀!");
            return;
        }

        // 获取用户输入的验证码
        var verifyCode = $("#verifyCode").val();
        if (!verifyCode) {
            layer.msg("请输入验证码!");
            return;
        }

        $.ajax({
            url: 'http://localhost:9000/seckill/api/path/' + seckillId,
            type: "GET",
            data: {verifyCode: verifyCode},
            xhrFields: {withCredentials: true},
            success: function (res) { // 只有http请求的status=200
                if (res.code === 200) {
                    doSeckill(res.data);
                } else {
                    layer.msg(res.msg);
                }
            },
            error: function (res) {
                if (res.responseJSON) {
                    layer.msg(res.responseJSON.msg);
                }
            }
        });
    }

    function doSeckill(random) {
        if (!seckillId) {
            layer.msg("秒杀参数有误!");
            return;
        }
        // 1. 检查用户是否登录
        if (!user) {
            layer.msg("请登录后再进行秒杀!");
            return;
        }

        // 生成uuid
        var uuid = getUuid(user.id);

        // 2. 直接发起秒杀请求
        $.ajax({
            url: 'http://localhost:9000/seckill/api/seckill/orders/' + random,
            type: "POST",
            data: {seckillId: seckillId, uuid: uuid},
            xhrFields: {withCredentials: true},
            success: function (res) { // 只有http请求的status=200
                if (res.code === 200) {
                    // 3. 如果秒杀成功, 往订单详情页跳转
                    // location.href = "/order_detail.html?orderNo=" + res.data;
                    layer.msg(res.msg);
                    createSocket(uuid);
                } else {
                    layer.msg(res.msg);
                }
            },
            error: function (res) {
                if (res.responseJSON) {
                    layer.msg(res.responseJSON.msg);
                }
            }
        });
    }

    var timer;

    function renderDetail(seckillGood) {
        $("#goodName").text(seckillGood.goodName);
        $("#goodImg").prop("src", seckillGood.goodImg);
        $("#startDate").text(seckillGood.startDate);
        $("#goodPrice").text(seckillGood.goodPrice);
        $("#seckillPrice").text(seckillGood.seckillPrice);
        $("#stockCount").text(seckillGood.stockCount);

        // 加载当前登录的用户
        rebderUser();
        // 加载完页面直接开始判断活动状态
        renderTime(seckillGood.startDate, seckillGood.endDate);
        // 渲染页面倒计时
        timer = setInterval(function (args) {
            renderTime(seckillGood.startDate, seckillGood.endDate)
        }, 1000);
    }

    function renderTime(sdate, edate) {
        var beginTime = new Date(sdate).getTime(),
            endTime = new Date(edate).getTime(),
            now = new Date().getTime();

        if (now < beginTime) {
            //   now: 10:00   beginTime: 12:00
            // 1. 如果当前时间小于开始时间: 秒杀活动尚未开始, 禁用秒杀按钮, 显示倒计时
            $("#buyButton").prop("disabled", true);
            var remain = parseInt((beginTime - now) / 1000);
            $("#seckillTip").text("距离秒杀活动开始还有:" + remain + "秒");
        } else {
            if (now < endTime) {
                //   now: 13:00   beginTime: 12:00   endTime: 18:00
                // 2. 如果当前时间大于开始时间 && 当前时间小于结束时间: 秒杀活动进行中, 启用按钮, 隐藏倒计时
                if (user) {
                    $("#buyButton").prop("disabled", false);
                }
                $("#seckillTip").text("活动火爆进行中");
            } else {
                //   now: 19:00   beginTime: 12:00   endTime: 18:00
                // 3. 如果当前时间大于开始时间 && 当前时间大于结束时间: 秒杀活动已经结束, 禁用按钮, 并提示秒杀活动已经结束
                $("#buyButton").prop("disabled", true);
                $("#seckillTip").text("活动已经结束了");
                // 活动结束以后, 清楚定时任务
                clearInterval(timer);
            }
        }
    }

    function rebderUser() {
        $.ajax({
            url: 'http://localhost:9000/member/api/users/session',
            type: "GET",
            xhrFields: {withCredentials: true},
            success: function (res) { // 只有http请求的status=200
                if (!res.data || res.code !== 200) {
                    // 用户没有登录
                    $("#userTip").show();
                    $("#buyButton").prop("disabled", "true");
                } else {
                    user = res.data;
                }
            },
            error: function (res) {
                if (res.responseJSON) {
                    layer.msg(res.responseJSON.msg);
                }
            }
        });
    }
</script>
</body>
</html>